<div class="card">
  <div class="header">
    <div>
      <a class="title" href="#">
        Building a SaaS product as a software developer
      </a>
      <p class="name">By John Doe</p>
    </div>
      <span class="image"></span>
  </div>
    <p class="description">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum
      provident a, ipsa maiores deleniti consectetur nobis et eaque.
    </p>
  <dl class="post-info">
    <div class="cr">
      <dt class="dt">Published</dt>
      <dd class="dd">31st June, 2021</dd>
    </div>
    <div class="cr">
      <dt class="dt">Reading time</dt>
      <dd class="dd">3 minute</dd>
    </div>
  </dl>
</div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card */
.card {
  max-width: 320px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(243, 244, 246, );
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  grid-gap: 1rem;
  gap: 1rem;
}

.title {
  font-size: 1.125rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: rgba(17, 24, 39, 1);
  text-decoration: none;
}

.title:hover {
  text-decoration: underline royalblue;
}

.name {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgba(75, 85, 99, 1);
}

.image {
  display: block;
  flex-shrink: 0;
  height: 3rem;
  width: 3rem;
  border-radius: 0.5rem;
  object-fit: cover;
  background-color: royalblue;
}

.description {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgba(107, 114, 128, 1);
}

.post-info {
  margin-top: 1.5rem;
  display: flex;
  grid-gap: 1rem;
  gap: 1rem;
}

.cr {
  display: flex;
  flex-direction: column-reverse;
}

.dt {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgba(75, 85, 99, 1);
}

.dd {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgba(107, 114, 128,1);
}
</style>
